<template>
  <div>
    <div class="ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>筛选条件</span>
        </div>
      </div>
      <el-form :inline="false" :model="form" class="demo-form-inline" label-width="100px">
        <div class="flex ba_f">
          <el-form-item label="查询日期：" class="mar_t20">
            <div class="flex-bet">
              <div>
                <el-radio-group v-model="form.timeType" @change="selectType">
                  <el-radio-button label="1">今天</el-radio-button>
                  <el-radio-button label="2">近七天</el-radio-button>
                  <el-radio-button label="3">近十五天</el-radio-button>
                  <el-radio-button label="4">自定义时间</el-radio-button>
                </el-radio-group>
                <span class="mar_l20" v-if="form.timeType=='4'">
                <el-date-picker v-model="form.time" type="daterange" range-separator="至" start-placeholder="开始日期"
                                end-placeholder="结束日期" format="yyyy年MM月dd日" :picker-options="pickerOptions"  @change="selectType"></el-date-picker>
              </span>
              </div>
            </div>
          </el-form-item>
        </div>
      </el-form>
    </div>
    <div class="mar_t20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>当面付概况</span>
        </div>
      </div>
      <div class="main-icon flex t_l mar_t20">
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">今日收款</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.money  || 0}}</p>
              <div class="flex">
                <p class="fon_14 color_9">有效订单：{{ newDate.count || 0 }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">预计收入</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.estimate  || 0}}</p>
              <div class="flex">
                <p class="fon_14 color_9">服务费支付：{{ newDate.serviceMoney || 0}}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG mar_r20">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">总收款</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.sumMoney || 0 }}</p>
              <div class="flex">
                <p class="fon_14 color_9">有效订单：{{ newDate.sumCount || 0 }}</p>
              </div>
            </div>
          </div>
        </div>
        <div class="flex-1 t_l pad_20 borderBG">
          <div class="flex-bet flex-y-top">
            <div>
              <p class="color_9 fon_14">总支付人数</p>
              <p class="fon_30 title35 lh16 pad_tb_20 wei">{{ newDate.payUserNum  || 0}}</p>
              <div class="flex yc">
                <p class="fon_14 color_9">订单：{{ newDate.money || 0}}</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="mar_t20">
      <div class="mar_t20 flex-bet">
        <div class="flex-g-1 ba_f pad_20 bor_rad5">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>订单渠道</span>
            </div>
          </div>
          <div id="mainEch32" class="mar_r20" style="height: 280px;width:580px;margin-top: 40px"></div>
        </div>
        <div class="flex-g-1 ba_f pad_20 bor_rad5 mar_l20">
          <div class="shuju_title">
            <div class="shuju_title_text">
              <span>支付占比</span>
            </div>
          </div>
          <div id="mainEch34" class="mar_r20" style="height: 280px;width:580px;margin-top: 40px"></div>
        </div>
      </div>
    </div>
    <div class="mar_t20 ba_f outmain">
      <div class="shuju_title">
        <div class="shuju_title_text">
          <span>整体看板</span>
        </div>
      </div>
      <div id="zhentiEch" style="height: 360px;" class="mar_t20"></div>
    </div>
  </div>
</template>
<script>
import echarts from 'echarts'
import {mapState} from "vuex";
import {getCashierData} from "@/api/statistics";
import {changeDate} from "@/utils/index";
export default {
  mounted() {
    this.getrealCover();
    window.addEventListener("resize", this.initchart);
  },
  computed:{
    ...mapState(['storeId'])
  },
  data() {
    return {
      selectData: '',
      pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.selectData = minDate.getTime()
          if (maxDate) {
            this.selectData = ''
          }
        },
        disabledDate: (time) => {
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
      },
      newDate:{},
      form: {
        shopValue: '',
        timeType: '1',
        time: [new Date(),new Date()],
        Mtime: '',
      },
      value: '',
      value1: new Date(),
      options: [{
        value: '1',
        label: '自然日'
      }, {
        value: '2',
        label: '自然月'
      }],
      optionsValue: '1',
      optionsShop: [{
        value: '1',
        label: '总店'
      }, {
        value: '2',
        label: '总店1'
      }],
      tableData:[],
      echarts2_option: {
        color: ['#4284ED', '#42CCF0'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['支付金额', '订单数']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          // 去除坐标轴上的刻度线
          axisTick: {
            show: false,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          // x轴的字体样式
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          // x轴的颜色和宽度
          axisLine: {
            lineStyle: {
              color: '#4ECB73',
              width: 2,   //这里是坐标轴的宽度,可以去掉
            }
          },
          data: []
        },
        yAxis: {
          type: 'value',
          axisTick: {       //y轴刻度线
            "show": false
          },
          axisLine: {
            "show": false,
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: '#333',
              fontSize: '12'
            }
          },
          splitLine: {
            lineStyle: {
              type: 'dotted',
              color: '#DDDDDD',
            },
            show: true
          }
        },
        series: [
          {
            name: '支付金额',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          },
          {
            name: '订单数',
            type: 'line',
            stack: '总量',
            smooth: true,
            data: []
          }
        ]
      },
      echarts1_option: {
        color: ['#0095FF', '#FDD835', '#4EC478', '#40C045'],
        // tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b}: {c} ({d}%)'
        // },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['安卓', 'IOS', '其他',]
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35, name: '安卓'},
              {value: 310, name: 'IOS'},
              {value: 10, name: '其他'},
            ],
          }
        ]
      },
      echarts3_option: {
        color: ['#0095FF', '#4CA8FF', '#4EC478', '#FBA33F'],
        // tooltip: {
        //     trigger: 'item',
        //     formatter: '{a} <br/>{b}: {c} ({d}%)'
        // },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['小程序']
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '16',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35, name: '小程序'}
            ],
          }
        ]
      },
      echarts32_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信小程序', '支付宝小程序']
        },
        series: [
          {
            name: '支付订单数',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信小程序'},
              {value: 20.00, name: '支付宝小程序'},
            ],
          }
        ]
      },
      echarts33_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['外卖订单', '外卖自提订单', '当面付订单']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '外卖订单'},
              {value: 20.00, name: '外卖自提订单'},
              {value: 20.00, name: '当面付订单'},
            ],
          }
        ]
      },
      echarts34_option: {
        color: ['#5654F5', '#4CA8FF', '#4EC478', '#FBA33F', '#EBA675'],
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          right: 0,
          data: ['微信支付', '支付宝支付', '余额支付']
        },
        series: [
          {
            name: '支付金额',
            type: 'pie',
            radius: ['40%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '20',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              {value: 35.00, name: '微信支付'},
              {value: 20.00, name: '支付宝支付'},
              {value: 20.00, name: '余额支付'},
            ],
          }
        ]
      },
    }
  },
  methods: {
    init2() {
      let myChart = echarts.init(document.getElementById('zhentiEch'))
      myChart.setOption(this.echarts2_option, true)
    },
    init() {
      let myChart = echarts.init(document.getElementById('mainEch'))
      myChart.setOption(this.echarts1_option, true)
    },
    init3() {
      let myChart = echarts.init(document.getElementById('mainEch2'))
      myChart.setOption(this.echarts3_option, true)
    },
    initchart(){
      let myChart1 = echarts.init(document.getElementById('zhentiEch'))
      myChart1.resize()
    },
    async getrealCover() {
      var params = {
        storeId: this.storeId,
        timeType: this.form.timeType,
        startTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[0]).substr(0,10) : '',
        endTime: this.form.timeType == '4' && this.form.time ? changeDate(this.form.time[1]).substr(0,10) : '',
      };
      const {data} = await getCashierData(params);
      console.log(data)
      if (data) {
        this.newDate = data
        this.echarts2_option.series[0].data = data.moneyChar.map(item => item.money);
        this.echarts2_option.series[1].data = data.countChar.map(item => item.money);
        this.echarts2_option.xAxis.data = data.moneyChar.map(item => item.hours);
        this.init2()
        this.echarts32_option.series[0].data[0].value = +data.wxCount;
        this.echarts32_option.series[0].data[1].value = +data.aliCount;
        this.mainEch32()
        this.echarts34_option.series[0].data[0].value = +data.wxMoney;
        this.echarts34_option.series[0].data[1].value = +data.aliMoney;
        this.echarts34_option.series[0].data[2].value = +data.balanceMoney;
        this.mainEch34()
      }
    },
    mainEch32() {
      let myChart = echarts.init(document.getElementById('mainEch32'))
      myChart.setOption(this.echarts32_option, true)
    },
    mainEch33() {
      let myChart = echarts.init(document.getElementById('mainEch33'))
      myChart.setOption(this.echarts33_option, true)
    },
    mainEch34() {
      let myChart = echarts.init(document.getElementById('mainEch34'))
      myChart.setOption(this.echarts34_option, true)
    },
    selectType(){
      this.getrealCover()
    },
    changeStore(){
      this.getrealCover()
    },
    changeTime(){
      this.getrealCover()
    },
    isNull(value) {
      if (value) {
        return false
      }
      return true
    },
  }
}
</script>
<style lang="scss" scoped>
.c2RF {
  height: 92px;
}

.curset {
  background-color: #edf4ff;
  border-color: #155bd4;
}

.crf {
  height: 92px;
  min-width: 200px;
  max-width: 240px;
  border: 1px solid #dcdee0;
  border-radius: 4px;
  padding: 16px;
  box-sizing: border-box;
  flex: 1 1 200px;
  cursor: pointer;
  transition: box-shadow .2s ease 0s;
}

.serleft {
  background-color: rgb(92, 137, 253);
  min-width: 80px;
}

.serright {
  background-color: rgb(243, 247, 253);
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
}

.rightmoder {
  min-width: 200px;
  width: 25%;
}

.notall {
  color: #c8c9cc;
  background-color: #f7f8fa;
  cursor: not-allowed;
}

.lhh40 {
  line-height: 40px;
  height: 40px;
}
</style>
